<template>
	<view class="proDetail">
		<u-popup :show="detailPopupState" @close="onClose" closeable round="10" 
		>
			<view class="detailWrapper" v-if="detailData.name">
				<view class="top">
					
				</view>
				
				<view class="body">
					<scroll-view scroll-y="true"  class="scrollView">
						<view class="headPic">
							<image :src="detailData.thumb[0].url" mode="scaleToFill"></image>
						</view>
						<view class="info">
								<view class="title">
									{{detailData.name}}
								</view>
								<view class="price">
									<view class="big">￥{{detailData.price}}</view>
									<view class="small">￥{{detailData.before_price}}</view>
									<view class="discount" v-if="detailData.before_price && (detailData.price/detailData.before_price >= 0.1)">{{discount(detailData.price,detailData.before_price)}}
								</view>
							</view>
						</view>
						<view class="detail">
							<view class="text">
								<view class="title">商品描述</view>
								<view class="description">
									<rich-text :nodes="detailData.description"></rich-text>
								</view>
							</view>
							<view class="picList">
								<view class="thumb" v-for="(item,index) in detailData.thumb" :key="item.url">
									<image :src="item.url" mode="widthFix" v-if="index != 0"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				
				<view class="footer">
					<u-button color="#ff5521" icon="shopping-cart" iconColor="#ffffff" @click="clickAddCart">加入购物车</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from "vuex"
	import {discount} from "@/utils/tools.js"
	export default {
		name:"pro-detail-popup",
		data() {
			return {
				
			};
		},
		computed:{
			...mapGetters(["detailPopupState","detailData"])
		},
		methods:{
			discount,
			...mapMutations((["SET_DETAIL_STATE","SET_SPECS_STATE"])),
			onClose(){
				this.SET_DETAIL_STATE(false)
				console.log("点击了遮罩");
			},
			clickAddCart(){
				this.SET_SPECS_STATE(true)
			}
		}
	}
</script>

<style lang="scss" scoped>
.detailWrapper{
	height: 85vh;
	.top{
		height: 80rpx;
		width: 100%;
	}	
	.body{
		height: calc(100% - 220rpx);
		.scrollView{
			height: 100%;
			padding: 0rpx 30rpx;
			.headPic{
				width: 740rpx;
				height: 690rpx;
				padding-right: 10rpx;
				@include flex-box();
				justify-content: space-around;
				.img{
					width: 100%;
					height: 100%;
				}
			}
			.info{
				padding:20rpx 0;
				border-bottom: 1rpx solid $border-color-light;
				.title{
					font-size: 40rpx;
					font-weight: bold;
				}
				.price{
					display: flex;
					align-items: center;
					padding-top: 20rpx;
					.big{
						font-size: 46rpx;
						font-weight: bold;
						color: $brand-theme-color;
					}
					.small{
						font-size: 28rpx;
						color: $text-font-color-3;
						font-weight: bold;
						text-decoration: line-through;
						margin-left: 10rpx;
						padding-top: 16rpx;
					}
				}
				
			}
			.detail{
				.text{
					padding: 10rpx 0;
					.title{
						font-size: 32rpx;
						font-weight: bold;	
					}
					.description{
						
					}
				}
				.picList{
					.thumb{
						@include flex-box();
					}
				}
			}
		
		}
	}
	.footer{
		height: 140rpx;
		border-top: 1rpx solid $border-color-light;
		@include flex-box();
		padding: 0 20rpx;
	}
}
</style>